<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<%@ include file="/commons/taglibs.jsp"%>
<html>
<head>
<script language="JavaScript" type="text/javascript" src="${ctx}/scripts/public.js"></script>
<link href="${ctx}/styles/aux_window.css" rel="stylesheet" type="text/css">
<%@ include file="/commons/validation.jsp" %>
<%@ include file="/commons/dateTime.jsp" %>
<script language="JavaScript" type="text/javascript" src="${ctx}/scripts/common.js"></script>
<script language="JavaScript" type="text/javascript" src="${ctx}/scripts/div/common.js"></script>
<script language="JavaScript" type="text/javascript" src="${ctx}/scripts/ajaxException.js"></script>
<script type="text/javascript" defer="defer">
	var windowObj = null;

	var inputCss = " inputtext "
	var validationCSS = " required integer-decimal-range-13-2 float-right "
	var validationMax = " max-value-"
/**********房号相关操作*******************/
	/**
	*   打开选择房屋页面
	*/
	function openSelectHouse(){
		var url = "${ctx}/customer_chooseSingleHouseAction.do?method=chooseBuildingMain&parentFrameId=byWaterFrame";
		top.windowOpen(url, "selectHouse", "${key.charge_meterData_byWater_selectHouse}", 500,800,true,"selectHouseFrame");
	}
	/**
	 * 通过选房间的功能点获取房号、房屋ID后,需要设置房号输入框、水、电表上次读数
	 */
	function setHouseInfo(_houseId,_houseNumber){
		$("houseId").value = _houseId;
		$("houseNumber").value = _houseNumber;

		$("houseNumber").fireEvent("onblur");//触发失去焦点事件,来触发验证
	}

	/**
	 *  当输入一次正确的房号 带出相关信息后 ,再输入一次错误的房号, 需要清空之前的填充的数据
	 */
	function clearMeterDataInfo(){
			$("houseId").value = null;
			$("ownerName").innerText = "";
			$("owners").value = null;
			$("showLastReading").innerText = "";
			$("lastReading").value = null;
	}
	/**
	 *  设置走表上次读数信息
	 */
	function setLastMeterDataInfo(){

		//在页面保存数据前,先清空数据
		clearMeterDataInfo();
		var url = "${ctx}/charge_meterDataRegisterAction.do?method=getMeterDataForMeterType&meterType=001";
		var param = "houseNumber=" + $("houseNumber").value;
		sendAjaxRequest(url,param,setMeterInfo);
		//设置走表信息
		function setMeterInfo(result){
			var obj = eval("(" + result.responseText + ")");
			$("houseId").value = obj.houseId;
			$("ownerName").innerText = obj.owner;
			$("owners").value = obj.owner;

			$("showLastReading").innerText =  obj.type001.lastReading;
			$("lastReading").value =  obj.type001.lastReading;

			var shuicss = inputCss + validationCSS + validationMax +  obj.type001.maxSize ;
			Validation.changeElmValidate("thisReading",shuicss);
		}
	}
/************end***********************/

/*********表单操作************/
	var formData = "";
	function mysubmit(){
		var url = "${ctx}/charge_meterDataRegisterAction.do?method=addByWater";
		var param = ${"byWaterForm"}.serialize();
		windowObj.ajaxSubmit(url,param,submitCallBack);

		function submitCallBack(result){
			findFrame("main").reloadFramWithoutCondition();
			windowClose();
		}
	}
	//保存及新增
	function sumitAndNew(){
		var url = "${ctx}/charge_meterDataRegisterAction.do?method=addByWater";
		var param = ${"byWaterForm"}.serialize();
		windowObj.saveAndAdd(url,param,addAndNewCallBack);

		function addAndNewCallBack(){
			findFrame("main").reloadFramWithoutCondition();
			var url = "${ctx}/charge_meterDataRegisterAction.do?method=initByWater&houseId=" + $("houseId").value;
			window.location.href = url;
			return false;
		}
	}
	function myWindowClose(){
		var currentFormData = formSerialize();
		windowObj.winClose(currentFormData == formData,"mysubmit","byWaterFrame");
	}
	//获取表单用户可填入的字段,在关闭按钮时,要求验证数据是否有改动
	//这里直接获取可填入字段值
	function formSerialize(){
		return $("byWaterForm").houseNumber.value +
			  $("byWaterForm").thisReading.value +
			  $("byWaterForm").recordTime.value;
	}
	/**********end***************/
	var lastThisValue = null;
	function thisMeterHandle(thisValue){
		if(thisValue == null || thisValue == "") return;
		if(lastThisValue == thisValue) return;
		lastThisValue = thisValue;
		if( parseFloat( $("lastReading").value) > parseFloat(thisValue) )
			Alert("${key.charge_meterData_byWater_tipLess}");
	}
	function init(){
		windowObj =new WindowObject("byWaterForm",["btn1_42","btn1_22","btn1_32"]);
		formData = formSerialize();
		<c:if test="${not empty houseVO}">
			setHouseInfo("${houseVO.keyword}","${houseVO.houseNumber}");
			$("houseNumber").focus();
			$("houseNumber").blur();
		</c:if>
	}
</script>
</head>

<body onload="init();">

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="window_head_outBg">
    	<table border="0" cellpadding="0" cellspacing="0">
	      <tr>
	        <td width="121">
	        	<img src="${ctx}/images/ico_Advance.gif" width="16" height="16" align="absmiddle">
	        	<span class="window_head_intext">${key.charge_meterData_byWater}</span>
	        </td>
	      </tr>
    </table></td>
  </tr>
  <tr>
    <td class="aux_header_line_1"></td>
  </tr>
  <tr>
    <td class="aux_header_line_2"></td>
  </tr>
  <tr>
    <td class="content">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td class="aux_outtable_color">
        <form id="byWaterForm" action="" class="required-validate">
        	<input type="hidden" id="houseId" name="houseId" value="">
			<input type="hidden" id="owners" name="owners" value="">
			<input type="hidden" id="lastReading" name="lastReading" value="">
        <table width="100%" border="0" cellpadding="0" cellspacing="1" class="aux_intable_color">

          <tr>
            <td class="aux_intable_td1">${key.charge_meterData_byWater_houseNumber}：</td>
           <td class="aux_intable_require">
           <table border="0" cellspacing="0" cellpadding="0">
             <tr>
               <td >
               		<input id="houseNumber"
               			   name="houseNumber"
               			   maxlength="36"
               			   type="text"
               			   class="inputtext required validate-ajax"
               			   validateUrl="${ctx}/charge_meterDataRegisterAction.do?method=validateHouseNumber&meterType=001"
               			   onSuccess="setLastMeterDataInfo"
               			   onFailure="clearMeterDataInfo"
               			   afterInsert="selectHouseImg"
               			   value=""
               			   size="16">
               </td>
               <td width="4">&nbsp;</td>
               <td >
	               	<a href="#"  onClick="openSelectHouse();" onFocus="this.blur()">
	               		<img  src="${ctx}/images/ico_houesno.GIF" alt="${key.charge_meterData_byWater_selectHousetips}" border="0">
	               	</a>
	               	<span id="selectHouseImg"></span>
               </td>
             </tr>
           </table></td>
            </tr>
          <tr>
            <td class="aux_intable_td1">${key.charge_meterData_byWater_ownerName}：</td>
            <td class="aux_intable_td2"><div id="ownerName"></div></td>
            </tr>

          <tr>
            <td class="aux_intable_td1">${key.charge_meterData_byWater_lastReading}：</td>
            <td class="aux_intable_td2"><div id="showLastReading"></div></td>
          </tr>


          <tr>
            <td class="aux_intable_td1">${key.charge_meterData_byWater_thisReading}：</td>
            <td class="aux_intable_require">
             <table border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td >
                		<input name="thisReading"
	                		   type="text"
	                		   onblur="thisMeterHandle(this.value);"
	                		   class="inputtext required float-right integer-decimal-range-13-2"
	                		   afterInsert="shuiShow"
	                		   style="text-align:right"
	                		   value=""
	                		   size="16">${key.lifang}
	                	<span id="shuiShow"></span>
                </td>
                <td width="4">&nbsp;</td>
                <td >&nbsp;</td>
              </tr>
            </table></td>
          </tr>

          <tr>
            <td class="aux_intable_td1">${key.charge_meterData_byWater_recordTime}：</td>
            <td class="aux_intable_require">
             <table border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td >
	                		<input name="recordTime"
	                			   type="text"
	                			   class="inputtext required validate-date-yyyy-mm-dd validate-ajax"
	                			   replaceId="dataValue"
	                			   value="${sysDate}"
	                			   size="16"
	                			   validateUrl="${ctx}/common_sysrefcodeAction.do?method=compareCurrentDate&dateFormat=yyyy-MM-dd&compareType=smallEqualsCurrentDate"
	                			   validateMessage="${key.charge_meterData_byWater_date_less}"
	                			   afterInsert="imageButton"
	                			   maxlength="10"
	                			   >
                </td>
                <td width="4">&nbsp;</td>
                <td ><img id="imageButton" src="${ctx}/images/ico_clock_month.gif" width="20" height="20"></td>
              </tr>
            </table>
            </td>
          </tr>
        </table></td>
      </tr>
    </table>
    </form>
    </td>
  </tr>
  <tr>
    <td align="left" class="window_footer"><table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><table border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td class="buttonOffLeft" id="btn1_41"></td>
              <td class="buttonOffMiddle" id="btn1_42" onClick="sumitAndNew();" onMouseOver="btn_change_over(4)" onMouseOut="btn_change_out(4)" onblur="btn_change(4)"><img src="${ctx}/images/ico_saveandnewfile.gif" alt="" width="14" height="14" border="0" align="absbottom">&nbsp;${key.saveAndAdd}</td>
              <td class="buttonOffRight" id="btn1_43"></td>
            </tr>
        </table></td>
        <td class="btn_between_space">&nbsp;</td>
        <td><table border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td class="buttonOffLeft" id="btn1_21"></td>
              <td class="buttonOffMiddle" id="btn1_22" onClick="mysubmit();" onMouseOver="btn_change_over(2)" onMouseOut="btn_change_out(2)" onBlur="btn_change(2)"><img src="${ctx}/images/ico_ok.gif" alt="" width="14" height="14" border="0" align="absbottom">&nbsp;${key.save}</td>
              <td class="buttonOffRight" id="btn1_23"></td>
            </tr>
        </table></td>
        <td class="btn_between_space"></td>
        <td><table border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td class="buttonOffLeft" id="btn1_31"></td>
              <td class="buttonOffMiddle" id="btn1_32" onClick="myWindowClose();" onMouseOver="btn_change_over(3)" onMouseOut="btn_change_out(3)" onBlur="btn_change(3)"><img src="${ctx}/images/ico_cancel.gif" alt="" width="14" height="14" border="0" align="absbottom">&nbsp;${key.close}</td>
              <td class="buttonOffRight" id="btn1_33"></td>
            </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table>

<script type="text/javascript">
              Calendar.setup(
              {
	              inputField : "recordTime", // ID of the input field
	              ifFormat : "%Y-%m-%d", // the date format
	              button : "imageButton", // ID of the button
	              align          :    "Tl",           // alignment (defaults to "Bl")
			      singleClick    :    true
              }
              );
</script>
</body>
</html>